<!--  -->
<template>
  <div class="hot">
    <div class="hothead">
      <div class="hotlogo">
        <img src="@/img/hotlogo.png">
      </div>
      <div class="changeanch">
        <el-icon>
          <Refresh />
        </el-icon>
        换一换
      </div>
    </div>
    <div class="hotbody">
      <ol start="0">
        <li style="color: white;"><span style="position: relative;">
            <el-icon style="position: absolute; left: -24px; top: 4px;">
              <View />
            </el-icon>奋力谱写中国式现代化浙江新篇章</span>
        </li>
        <li v-for="item in hotlis"><span>{{ item }}</span> </li>
      </ol>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
const hotlis = ref(['今日亚运看点：国乒男女团冲冠',
  '美将11个中国实体及自然人列入清单',
  '盛大开幕仪式 难忘十个精彩瞬间',
  '内蒙古一楼盘施工时挖出煤层',
  '汪顺回应“颜值震惊全网”热搜',
  '旅澳华人母子回国首站打卡孔子故里',
  '爱尔兰前总理的侄孙女为香港夺金',
  '网传陕西一小学发的饮用奶呈粥状',
  '杭州亚运会第2日：中国再夺19金'])
</script>

<style  scoped>

 .hot {
  width: 100%;
  height: 460px;
  margin-top: 8px;
}

 .hot .hothead {
  width: 100%;
  height: 50px;
}

 .hot .hothead .hotlogo {
  float: left;
  width: 70px;
  height: 45px;
  overflow: hidden;
}

 .hot .hothead .hotlogo img {
  width: 100%;
}

 .hot .hothead .changeanch {
  float: right;
  width: 60px;
  height: 45px;
  font-size: 12px;
  line-height: 45px;
}

 .hot .hotbody {
  width: 100%;
  height: 410px;
}

 .hot .hotbody ol {
  margin-top: 5px;
  margin-left: 30px;
  font-size: 17px;
}

 .hot .hotbody ol li {
  margin-bottom: 16px;
}

 .hot .hotbody ol li:nth-child(2) {
  color: red;
}

 .hot .hotbody ol li:nth-child(3) {
  color: red;
}

 .hot .hotbody ol li:nth-child(4) {
  color: red;
}

 .hot .hotbody ol li span {
  color: black;
}

 .hot .hotbody ol li:hover span {
  color: rgb(0, 134, 247);
}

</style>
